<%@ page import="com.ws.ssmzongjie3.util.Res" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"  %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>路线详情</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/route-detail.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
    <style>
        .topbar{position:relative}
        .hottel{position:absolute;top:12px;right:50px}
        .hottel p{cursor:pointer;font-weight:700;float:left;width:100px;border:1px solid orange;text-align:center;height:45px;line-height:45px;margin-right:10px}
        .hottel a{color:#666;text-decoration:none}
        
        /* 新增样式 */
        .haslogin {
            position: absolute;
            top: 12px;
            right: 50px;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .haslogin p {
            margin: 0;
            font-size: 16px;
            color: #333;
        }
        .haslogin a {
            color: #667eea;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }
        .haslogin a:hover {
            color: #5a6ecb;
            text-decoration: underline;
        }

        .comment-list {
            margin-bottom: 20px;
        }

        .comment-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .comment-user {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .comment-content {
            margin-bottom: 5px;
        }

        .comment-time {
            color: #999;
            font-size: 12px;
        }

        .comment-form textarea {
            width: 100%;
            height: 100px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        
    </style>
</head>

<body>
    <!--引入头部-->
    <header id="header">

        <div class="header_wrap">
            <div class="topbar">
                <div class="logo">
                    <a href="${pageContext.request.contextPath}/luyou/shouye"><img src="${pageContext.request.contextPath}/images/logo.png" style="height: 60px;" alt=""></a>
                </div>
                <form class="search" action="${pageContext.request.contextPath}/luyou/sousuo">
                    <input name="route_name" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">
                    <input type="submit" value="搜索" class="search-button">
                </form>
                <c:choose>
                    <c:when test="${empty user}">
                        <div class="hottel">
                            <a href="${pageContext.request.contextPath}/luyou/login"><p>登录</p></a>
                            <a href="${pageContext.request.contextPath}/luyou/zhuce"><p>注册</p></a>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="haslogin">
                            <p>欢迎：<a href="${pageContext.request.contextPath}/user/gerenzhongxin">${user.u_name}</a></p>
                            <p><a href="${pageContext.request.contextPath}/user/tuichu">退出登录</a></p>
                        </div>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
    </header>
    <!-- 详情 start -->
    
    <div class="wrap">
        <div class="bread_box">
            <a href="${pageContext.request.contextPath}/luyou/shouye">首页</a>
            <span> &gt;</span>
            <a href="#">${routeById.columns.column_name}</a><span> &gt;</span>
            <a href="#">${routeById.route_name}</a>
        </div>
        <div class="prosum_box">
            <dl class="prosum_left">
                <dt>
<%--                    <img alt="" class="big_img" src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">--%>
                        <img alt="" class="big_img" src="<%=Res.fileUrl%>${routeById.route_photo}">

                </dt>
                <dd>
                    <a class="up_img up_img_disable"></a>
                    <a title="" class="little_img" data-bigpic="<%=Res.fileUrl%>${routeById.route_photo}">
                        <img src="<%=Res.fileUrl%>${routeById.route_photo}">
                    </a>
                    <c:forEach items="${route.routeMaps}" var="routeMap">
                        <a title="" class="little_img" data-bigpic="<%=Res.fileUrl%>${routeMap.route_img_url}">
                            <img src="<%=Res.fileUrl%>${routeMap.route_img_url}">
                        </a>
                    </c:forEach>
                    <a class="down_img down_img_disable" style="margin-bottom: 0;"></a>
                </dd>
            </dl>
            <div class="prosum_right">
               <p class="pros_title">${routeById.route_name}</p>
<%--                <p class="hot">1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>--%>
                <div class="pros_other">
                	<p>商家：${routeById.business.business_name}</p>
                    <p>咨询电话 : ${routeById.business.business_phone}</p>
<%--                    <p>地址 ： 石家庄市北二环顽石科教集团</p>  --%>
                </div>
                <div class="pros_price">
                    <p class="price"><strong>¥${routeById.route_price}</strong><span>起</span></p>
                    <p class="collect">
                        <a class="btn like-btn" onclick="likeRoute(${routeById.route_id})"><i class="glyphicon glyphicon-thumbs-up"></i>点赞</a>
                        <span class="like-count">已点赞${likenum}次</span>
                        
                        <a class="btn collect-btn" onclick="collectRoute(${routeById.route_id})"><i class="glyphicon glyphicon-heart-empty"></i>收藏</a>
                        <a class="btn already" style="display: none;" onclick="collectRoute(${routeById.route_id})"><i class="glyphicon glyphicon-heart"></i>已收藏</a>
                        <span class="collect-count">已收藏${collectionnum}次</span>
                    </p>
                    <p class="order">
                        <a href="javascript:void(0)" class="btn btn-success btn-lg" data-toggle="modal" data-target="#orderModal">
                            <i class="glyphicon glyphicon-shopping-cart"></i> 立即下单
                        </a>
                    </p>
                </div>        
            </div>  
        </div>
        <div class="you_need_konw">
            <span>旅游须知</span>
            <div class="notice">
                <p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br>

                <p>2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p>

                <p>3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p>

                <p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p>

                <p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p>
                <p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br>

                <p>2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p>

                <p>3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p>

                <p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p>

                <p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p>
            </div>           
        </div>
    </div>
    <!-- 详情 end -->
</body>
    <!--引入头部-->
    <!-- 下单模态框 -->
    <div class="modal fade" id="orderModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">填写订单信息</h4>
                </div>
                <div class="modal-body">
                    <form id="orderForm">
<%--                        <div class="form-group">--%>
<%--                            <label>出行日期：</label>--%>
<%--                            <input type="date" class="form-control" name="travelDate" required>--%>
<%--                        </div>--%>
                        <div class="form-group">
                            <label>成人人数：</label>
                            <input type="number" class="form-control" name="peopleCount" min="1" required>
                        </div>
                        <div class="form-group">
                            <label>儿童人数：</label>
                            <input type="text" class="form-control" name="contactName" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="submitOrder()">提交订单</button>
                </div>
            </div>
        </div>
    </div>
</html>

<footer id="footer">

    <div class="company">
        <p>顽石教育有限公司 版权所有Copyright 2019-2020, All Rights Reserved 京ICP备12390</p>
    </div>
</footer>
    <script>
    
    // 提交订单
    function submitOrder() {
        // 判断用户是否登录
        var user_id = "${user.user_id}";
        if (!user_id) {
            alert('请先登录！');
            window.location.href = '${pageContext.request.contextPath}/luyou/login'; // 跳转到登录页面
            return;
        }
    
        // 获取表单数据
        var adultCount = parseInt($('input[name="peopleCount"]').val()); // 成人数量
        var childCount = parseInt($('input[name="contactName"]').val()); // 儿童数量
        var routePrice = parseFloat(${routeById.route_price}); // 线路价格
    
        // 计算订单价格：成人数量 * 价格 + 儿童数量 * 价格的一半
        var orders_price = (adultCount * routePrice) + (childCount * (routePrice / 2));
    
        var formData = {
            route_id: ${routeById.route_id}, // 线路主键
            user_id: user_id, // 用户主键
            ordersState: 0, // 订单状态，0表示待支付
            orders_price: orders_price, // 计算后的订单金额
            buyDate: new Date().toISOString(), // 下单时间，使用当前时间
            adult: adultCount, // 成人数量
            child: childCount // 儿童数量
        };
    
        // 发送 AJAX 请求
        $.ajax({
            url: '${pageContext.request.contextPath}/order/insert',
            type: 'POST',
            contentType: 'application/json', // 设置为 JSON 格式
            data: JSON.stringify(formData), // 将数据转换为 JSON 字符串
            success: function(data) {
                if (data.success) {
                    alert('订单提交成功！');
                    $('#orderModal').modal('hide'); // 关闭模态框
                } else {
                    alert('订单提交失败：' + data.message);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('请求失败：', textStatus, errorThrown);
                alert('请求失败，请稍后重试！');
            }
        });
    }
    </script>

    <!--引入头部-->
    <!-- 尾部 start-->

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/include.js"></script>
    <script>
        $(document).ready(function() {
            //焦点图效果
            //点击图片切换图片
            $('.little_img').on('mousemove', function() {
                $('.little_img').removeClass('cur_img');
                var big_pic = $(this).data('bigpic');
                $('.big_img').attr('src', big_pic);
                $(this).addClass('cur_img');
            });
            //上下切换
            var picindex = 0;
            var nextindex = 4;
            $('.down_img').on('click',function(){
                var num = $('.little_img').length;
                if((nextindex + 1) <= num){
                    $('.little_img:eq('+picindex+')').hide();
                    $('.little_img:eq('+nextindex+')').show();
                    picindex = picindex + 1;
                    nextindex = nextindex + 1;
                }
            });
            $('.up_img').on('click',function(){
                var num = $('.little_img').length;
                if(picindex > 0){
                    $('.little_img:eq('+(nextindex-1)+')').hide();
                    $('.little_img:eq('+(picindex-1)+')').show();
                    picindex = picindex - 1;
                    nextindex = nextindex - 1;
                }
            });
            //自动播放
            var timer = setInterval("auto_play()", 5000);
        });

        //自动轮播方法
        function auto_play() {
            var cur_index = $('.prosum_left dd').find('a.cur_img').index();
            cur_index = cur_index - 1;
            var num = $('.little_img').length;
            var max_index = 3;
            if ((num - 1) < 3) {
                max_index = num - 1;
            }
            if (cur_index < max_index) {
                var next_index = cur_index + 1;
                var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
                $('.little_img').removeClass('cur_img');
                $('.little_img:eq(' + next_index + ')').addClass('cur_img');
                $('.big_img').attr('src', big_pic);
            } else {
                var big_pic = $('.little_img:eq(0)').data('bigpic');
                $('.little_img').removeClass('cur_img');
                $('.little_img:eq(0)').addClass('cur_img');
                $('.big_img').attr('src', big_pic);
            }
        }
    </script>




    <script>
    // 点赞功能
    $(document).ready(function() {
        // 页面加载时根据 ${like} 设置点赞按钮样式
        if (${like}) {
            $('.like-btn').html('<i class="glyphicon glyphicon-thumbs-up"></i>已点赞');
            $('.like-btn').addClass('liked');
        } else {
            $('.like-btn').html('<i class="glyphicon glyphicon-thumbs-up"></i>点赞');
            $('.like-btn').removeClass('liked');
        }
    });
    
    // 点赞功能
    function likeRoute(route_id) {
        var user_id = "${user.user_id}"; // 获取当前用户的 user_id
        if (!user_id) {
            alert('请先登录！');
            window.location.href = '${pageContext.request.contextPath}/luyou/login';
            return;
        }
        $.ajax({
            url: '${pageContext.request.contextPath}/dianzan/insert',
            type: 'POST',
            contentType: 'application/x-www-form-urlencoded', // 修改为表单形式
            data: { route_id: route_id, user_id: user_id }, // 确保参数名一致
            success: function(data) {
                if (data.success) {
                    $('.like-count').text('已点赞' + data.likeCount + '次');
                    if (data.isLiked) {
                        $('.like-btn').html('<i class="glyphicon glyphicon-thumbs-up"></i>已点赞');
                        $('.like-btn').addClass('liked');
                    } else {
                        $('.like-btn').html('<i class="glyphicon glyphicon-thumbs-up"></i>点赞');
                        $('.like-btn').removeClass('liked');
                    }
                } else {
                    alert('点赞失败：');
                    console.log(data.message);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('请求失败：', textStatus, errorThrown);
                alert('请求失败，请稍后重试！');
            }
        });
    }

    // 收藏功能
    $(document).ready(function() {
        // 页面加载时根据 ${collection} 设置收藏按钮样式
        if (${collection}) {
            $('.collect-btn').hide();
            $('.already').show();
        } else {
            $('.collect-btn').show();
            $('.already').hide();
        }
    });
    
    // 收藏功能
    
    // 收藏功能
    
    // 收藏功能
    function collectRoute(routeId) {
        var user_id = "${user.user_id}"; // 获取当前用户的 user_id
        if (!user_id) {
            alert('请先登录！');
            window.location.href = '${pageContext.request.contextPath}/luyou/login';
            return;
        }
        var isCollected = $('.already').is(':visible'); // 判断当前是否已收藏
        console.log('isCollected:', isCollected);
        $.ajax({
            url: '${pageContext.request.contextPath}/collection/shoucang',
            type: 'POST',
            contentType: 'application/x-www-form-urlencoded', // 修改为表单格式
            data: { route_id: routeId, user_id: user_id }, // 发送收藏请求
            success: function(data) {
                if (data.success) {
                    $('.collect-count').text('已收藏' + data.collectCount + '次'); // 更新收藏数量
                    if (isCollected) {
                        $('.collect-btn').show();
                        $('.already').hide();
                    } else {
                        $('.collect-btn').hide();
                        $('.already').show();
                    }
                } else {
                    console.log('收藏失败：', data); // 打印详细的错误信息
                    alert('收藏失败：' + data.message);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('请求失败：', textStatus, errorThrown); // 打印请求失败信息
                alert('请求失败，请稍后重试！');
            }
        });
    }
    

    </script>
